<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<!--
	作者：544773607@qq.com
	时间：2021-07-30
	描述：搜索框
-->

        <div class="search">
            <input type="text" placeholder="请输入..." name="" id="" value="" />
            <button><i>搜索</i></button>
        </div>




<!--
	作者：544773607@qq.com
	时间：2021-07-30
	描述：轮播图
-->
<div style="width: 80%;height: 500px;border-radius: 1px; margin: 0 auto;">
	

<div class="header">

	<div class="menu-bar">
		<div class="view">
			<div class="category">
				<h2>商品分类</h2>
				<ul class="category-option">
					<li class="cat-item top-cat">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>快活林大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>快活林小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>
							</div>
						</div>
						<i class="icon i0"></i>

						<a class="txt" href="#">快活林</a>
					</li>
<!--                -->
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>百岁山大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>百岁山小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>
							</div>
	
						</div>
						<i class="icon i1"></i>
						<a class="txt" href="#">百岁山</a>
					</li>
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						
						<i class="icon i2"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						
						<i class="icon i3"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						
						<i class="icon i4"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						<i class="icon i5"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						<i class="icon i6"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					
					<li class="cat-item ">
						<div class="sub-cat clearfix">
							<div class="sub-cat-links Left">
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝大</a>
									</li>
									<li class="Left sub-content">
										<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
									
								</ul>
								<ul class="sub-group clearfix">
									<li class="Left sub-title">
										<a href="#"><i class="i-t"></i>怡宝小</a>
									</li>
									<li class="Left sub-content">
								    	<a href="#">1L</a>
										<a href="#" style="color:#e62318 !important;">100ml</a>
										<a href="#" style="color:#e62318 !important;">200ml</a>
										<a href="#">300ml</a>
										<a href="#">400ml</a>
										<a href="#">500ml</a>
									</li>
								</ul>								
							</div>
							
						</div>
						<i class="icon i7"></i>
						<a class="txt" href="#">怡宝</a>
					</li>
					
	
				</ul>
			</div>
			<ul class="navigator">
				<li class="current">
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">促销商品</a>
				</li>
				<li>
					<a href="#">打折商品</a>
				</li>
				<li>
					<a href="#">降价商品</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<!--轮播-->
<div class="scroll-banner" style="background-color: rgb(241,243,240);">
	<ul class="scroll-content">
		<li class="scroll-item" style="background-color: rgb(241,243,240);display: block;">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/kuaihuoling1.jpg">
				</a>
			</div>
		</li>
		<li class="scroll-item" style="background:#eef3f5">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/baisuishan1.jpg">
				</a>
									
			</div>
		</li>
		<li class="scroll-item" style="background-color: rgb(241,243,240);">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/yibao.jpg">
				</a>
									
			</div>
		</li>
		<li class="scroll-item" style="background:#e8eaea">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/feiji3.jpg">
				</a>
						
			</div>
		</li>
		<li class="scroll-item" style="background-color: rgb(241,243,240);">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/bingchuan1.jpg">
				</a>
								
			</div>
		</li>
		<li class="scroll-item" style="background-color: rgb(241,243,240);">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/youkuang1.jpg">
				</a>
								
			</div>
		</li>
		<li class="scroll-item" style="background-color: rgb(241,243,240);">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/zuolan1.jpg">
				</a>
									
			</div>
		</li>
		<li class="scroll-item" style="background-color: rgb(241,243,240);">
			<div class="scroll-index">
				<a href="#">
					<img class="sc-big fadeInR" src="img/yiyun.jpg">
				</a>
				 					
			</div>
		</li>
	</ul>
	<div class="scroll-btn">
		<span class="current"></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.3.js" ></script>
<script type="text/javascript">
	//左侧分类导航
	$('.category-option .cat-item').hover(function(){$(this).toggleClass('hover')})
	//图片轮播
	jQuery(".scroll-banner").slide({mainCell:".scroll-content",titCell:".scroll-btn span",titOnClassName:"current",effect:"fold",autoPlay:true,delayTime:1000,interTime:3500});
</script>
</div>
<!--
	描述：
-->
<p style="clear: both;"></p>

<div style="width: 80%;margin-left: 10%;margin-top:80px;background: white;height: 50px;">
	<font style="color: red;position: absolute;margin:5px 50px;"><h2>猜你喜欢</h2></font>
</div>
	   <div class="goods_list">
	   	 <ul >
	   	 	<li>
	   	 		<div class="">
	   	 			<ul>
	   	 				<img src="img/baisuishan2.jpg" />
	   	 				<li><a>农夫山泉矿泉水最新版</a></li>
	   	 				<li><a>加入购物车</a>  <a>收藏</a></li>
	   	 				<li><a>$100</a></li>
	   	 			</ul>
	   	 		</div>
	   	 	</li>
	   	 	<li>
	   	 		<div class="">
	   	 			<ul>
	   	 				<img src="img/kuaihuoling2.jpg" />
	   	 				<li><a>农夫山泉矿泉水最新版</a></li>
	   	 				<li><a>加入购物车</a>  <a>收藏</a></li>
	   	 				<li><a>$100</a></li>
	   	 			</ul>
	   	 		</div>
	   	 	</li>
	   	 </ul>
	   </div>	
		<p style="width: 100%;border-bottom-style: solid;"></p>

	</body>
</body>
</html>